<template>
    <div class="main">
        <headerComVue>
            <template #top>
                <div style="
              width: 60px;
              display: flex;
              align-items: center;
              justify-content: space-between;
            ">
                    <van-icon @click="getDataList(true)" name="replay" color="white" size="22" />
                </div>
            </template>
        </headerComVue>
        <div :style="{ marginTop: headerTop }">
            <van-tabs style="position: relative" v-model:active="active">
                <van-tab title="我的记录">
                    <div @scroll="handleScroll" ref="refList" class="lists" :style="{
                        height: sheight,
                    }">
                        <Card :key="JSON.stringify(listInfo.list)" :list="listInfo.list"></Card>
                        <van-empty v-if="listInfo.list.length == 0" image="search" description="暂无搜索内容">
                            <van-button @click="getDataList(true)" round type="primary"
                                class="bottom-button">刷新</van-button>
                        </van-empty>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script setup lang="ts">
import headerComVue from "@/components/headerCom.vue";
import { ref, getCurrentInstance, reactive, onMounted } from "vue";
import { showToast } from "vant";
import { useSelfHeight } from "@/composition/index";
import { getHistoryList } from "@/api";
import Card from "@/components/card.vue";
const sheight = ref<string>("0px");
const headerTop = ref<number>(0);
const active = ref(0);
const listInfo = reactive({
    cpage: 1,
    total: 0,
    lock: false,
    list: [],
}) as any;
const { proxy } = getCurrentInstance() as any;
const handleScroll = () => {
    const container = proxy.$refs.refList; // 获取容器元素
    if (
        container.clientHeight + container.scrollTop >=
        container.scrollHeight - 10
    ) {
        getDataList();
    }
};

const getDataList = async (isRresh?: boolean) => {
    if (isRresh) {
        listInfo.cpage = 1;
        listInfo.list = [];
        await getHistoryList({
            pageNumber: listInfo.cpage,
            pageSize: 10,
        }).then((res: any) => {
            if (res.code == 200) {
                listInfo.list = [...listInfo.list, ...res.data.list];
                listInfo.total = res.total;
                showToast("数据已更新");
            }
        });
    } else {
        if (!listInfo.lock) {
            listInfo.lock = true;
            return new Promise<any>(async (resolve, reject) => {
                await getHistoryList({
                    pageNumber: listInfo.cpage,
                    pageSize: 10,
                })
                    .then((res: any) => {
                        if (res.code === 200) {
                            if (listInfo.list.length >= res.total) {
                                reject("err");
                                return showToast("没有更多了");
                            }
                            resolve(res);
                            listInfo.list = [...listInfo.list, ...res.data.list];
                            listInfo.cpage++;
                            listInfo.total = res.total;
                        }
                    })
                    .catch((err: any) => {
                        reject(err);
                        console.log(err);
                    })
                    .finally(() => {
                        listInfo.lock = false;
                    });
            });
        } else {
            return;
        }
    }
};
const selfHeight = async () => {
    let res = await useSelfHeight(true);
    headerTop.value = res.headerTop;
    sheight.value = res.sheight;

    console.log(sheight.value);

};
onMounted(() => {
    selfHeight();
});
const init = () => {
    getDataList();
};
init();


</script>

<style lang="scss" scoped>
.main{
    height: 100vh;
    overflow: hidden;
}
:deep(.van-share-sheet__options) {
    display: flex;
    justify-content: center;
}

:deep(.van-tag--mark) {
    border-radius: 10px 0px 10px 0px;
}

:deep(.van-tabs__nav) {
    width: calc(100% - 30px) !important;
}

.filter {
    width: 30px;
    height: 44px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
}

.lists {
    padding: 0 10px;
    box-sizing: border-box;
    overflow-y: scroll;
    // border: 1px solid red;

    .item {
        width: 100%;
        position: relative;
        border-radius: 10px;
        padding: 20px 2px 2px 10px;
        background-color: white;
        box-sizing: border-box;
        margin-top: 14px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

        .cell {
            display: flex;
            align-items: center;
            font-size: 13px;
            box-sizing: border-box;
            padding: 10px 12px;

            .title {
                width: 60px;
                font-size: 13px;
                flex-shrink: 0;
                margin-right: 14px;
                font-weight: 600;
            }
        }

        .tag {
            width: 100%;
            position: absolute;
            top: 0;
            right: 0px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .btn {
            display: flex;
            justify-content: flex-end;
            padding-right: 10px;
            padding-bottom: 10px;
            box-sizing: border-box;
        }
    }
}
</style>